import './style.scss'
import { number2color, ruleModalSetting, strokeWidthSetting, readFile } from './utils'

const map = new AMap.Map('Map', {
    center: [116.397428, 39.90923],
    zoom: 11,
});

const strokeWidth = strokeWidthSetting()
ruleModalSetting()

function roadStr2Array(str) {
    let arr = []
    str.split('|').forEach(item => {
        let path = []
        item.split('_').forEach(i => {
            path.push(i.split(','))
        })
        arr.push(path)
    })
    return arr
}

function canvasLine(ls, color = 'blue') {
    let path = []
    for (let i of ls) {
        path.push(new AMap.LngLat(...i))
    }
    var polyline = new AMap.Polyline({
        path,
        strokeColor: color,
        strokeOpacity: 1,
        strokeWeight: strokeWidth.value,
        lineJoin: 'round' // 折线拐点连接处样式
    })
    // 将折线添加至地图实例
    map.add(polyline);
}

function init(list) {
    for (let item of list) {
        if (item.C) {
            let list = roadStr2Array(item.C)
            for (let path of list) {
                canvasLine(path, number2color(item.B))
            }
        }
    }
}

document.querySelector('#Upload').addEventListener('change', e => {
    const file = e.target.files[0]
    readFile(file).then(res => {
        console.log(res)
        init(res)
    })
})
